<template>
  <el-dialog v-model="dialogVisible" :title="title" @close="close()">
    <el-scrollbar>
      <div style="max-height:500px;">
        <slot />
      </div>
    </el-scrollbar>
    <template #footer>
      <span class="dialog-footer">
          <el-button @click="close()">取 消</el-button>
          <el-button type="primary" @click="save()"> 确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref,reactive,watch,defineEmits,defineProps,computed} from "vue";

let props = defineProps({
  modelValue: {
    type: Boolean,
    require: true,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  save: {
    type: Function,
    default: () => {
      return Function;
    }
  }
});

const dialogVisible = ref(props.modelValue);//显示弹窗
const title = ref(props.title);//弹窗标题

let emits = defineEmits(['update:modelValue', 'save']);

//销毁
const close = () => {
  dialogVisible.value = false;
  emits('update:modelValue', false);
}
//保存表单方法
const save = () => {
  emits('save', props.save);
}

//监听value
watch(() => props.modelValue, (value, o) => {
  dialogVisible.value = value;
});
</script>




